<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>关于我们</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- css files -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/typo.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/portfolio.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/serv.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/nav.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- /css files -->
    <!-- js files -->
    <script src="js/modernizr.custom.js"></script>
    <!-- /js files -->
</head>
<body>
<!-- banner section -->
<section class="inner-banner">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h2 class="page-header text-center">关于我们</h2>
            </div>
        </div>
    </div>
</section>
<!-- /banner section -->
<!-- navigation -->
<section class="navigation">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-md-5 col-sm-5 nav-w3ls1">
                <div class="logo">
                    <a href="index.jsp" class="logo-w3ls"><h1>生命蓝在线投票系统</h1></a>
                </div>
            </div>
            <div class="col-lg-7 col-md-7 col-sm-7 nav-w3ls2">
                <div class="main clearfix">
                    <nav id="menu" class="nav">
                        <ul>
                            <li>
                                <a href="index.jsp">
                                    <span class="icon"><i aria-hidden="true" class="icon-home"></i></span>
                                    <span>首页</span>
                                </a>
                            </li>
                            <li>
                                <a href="matchManage.jsp">
                                    <span class="icon"><i aria-hidden="true" class="icon-services"></i></span>
                                    <span>投票活动</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="icon"><i aria-hidden="true" class="icon-portfolio"></i></span>
                                    <span>登陆</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="icon"><i aria-hidden="true" class="icon-team"></i></span>
                                    <span>注册</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="#">
                                    <span class="icon"><i aria-hidden="true" class="icon-contact"></i></span>
                                    <span>关于我们</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /navigation -->
<section class="page-crumb">
    <div class="container">
        <!-- Page Heading/Breadcrumbs -->
        <div class="row">
            <div class="col-lg-12">
                <ol class="breadcrumb">
                    <li><a href="index.jsp">首页</a>
                    </li>
                    <li class="active">关于我们</li>
                </ol>
            </div>
        </div>
        <!-- /.row -->
    </div>
</section>
<!-- contact section -->
<section class="our-contacts">
    <div class="container">
        <h3 class="text-center w3layouts w3 w3l w3ls agileits agileinfo wthree w3-agileits">关于我们</h3>
        <p class="text-center w3layouts w3 w3l w3ls agileits agileits-w3layouts agile w3-agile">
            生命蓝在线投票系统 只为高效 简洁 影响力而生</p>
        <div class="row">
            <div class="col-lg-8 col-md-8">
                <form action="#" method="post">
                    <div class="row">
                        <div class="form-group col-lg-4">
                            <input type="text" class="form-control user-name" placeholder="您的姓名" required/>
                        </div>
                        <div class="form-group col-lg-4">
                            <input type="email" class="form-control mail" placeholder="电子邮箱" required/>
                        </div>
                        <div class="form-group col-lg-4">
                            <input type="tel" class="form-control pno" placeholder="联系电话" required/>
                        </div>
                        <div class="clearfix"></div>
                        <div class="form-group col-lg-12">
                            <textarea class="form-control" rows="6" placeholder="您的建议" required></textarea>
                        </div>
                        <div class="form-group col-lg-12">
                            <button type="submit" class="btn-outline2">提交</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="contact-details">
                    <h4 class="agileinfo wthree w3-agileits agileits-w3layouts agile w3-agile">取得联系</h4>
                    <div class="contact-info">
                        <div class="address">
                            <i class="glyphicon glyphicon-globe"></i>
                            <p class="p3">客服热线1</p>
                            <p class="p4">中国, 华南区</p>
                        </div>
                        <div class="phone">
                            <i class="glyphicon glyphicon-phone-alt"></i>
                            <p class="p3">+400620 8300</p>
                            <p class="p4">+12580 12580</p>
                        </div>
                        <div class="email-info">
                            <i class="glyphicon glyphicon-envelope"></i>
                            <p class="p3"><a href="#">SML@tencent163.com</a></p>
                        </div>
                    </div>
                    <div class="footer-links">
                        <ul>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-whatsapp"></i></a></li>
                            <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- footer section -->
<section class="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 footer-w3ls1">
                <h3>我们的优势</h3>
                <p class="footer-p1">
                    1.是任何一次商演（时间短、影响范围小）、电视（投入大，效果不明显）
                    或者户外广告（不能快速吸引消费者眼球）在投入产出效率上都难以企及的。  
                    </p>
                <p class="footer-p1">2.迅速提升活动商家的广告价值，降低商家广告成本，提高知名度以及美誉度。
                <p class="footer-p1">
                3.网络投票的主要目的就是人群放大：通过网络投票，可以吸引大量的选手及相关亲友的关注，
                通过以往的数据统计，一名选手参与投票，会带动60人参与。这样可以最大程度的向客户展现实力，扩大社会影响力。</p>
            </div>
            <div class="col-lg-4 col-md-4 footer-w3ls2">
                <h3>发布投票/提供赞助</h3>
                <p class="footer-p1">举办投票活动或提供赞助，请联系我们，专业团队为您服务</p>
                <div class="sub-w3ls">
                    <form action="#" method="post">
                        <div class="form-group">
                            <label for="inputEmail1" class="col-lg-4 control-label"></label>
                            <input type="email" name="email" class="form-control" id="inputEmail1" placeholder="Email" required>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn-outline">订阅</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 footer-w3ls3">
                <h3>社交方式/分享</h3>
                <ul class="social-icons">
                    <li><a href="#"><i class="fa fa-facebook"></i>Facebook（脸盆网）</a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i>Twitter（推特）</a></li>
                    <li><a href="#"><i class="fa fa-linkedin"></i>Linkedin（领英）</a></li>
                    <li><a href="#"><i class="fa fa-google-plus"></i>Googleplus（谷歌）</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-7 copy-w3ls1">
                <ul class="nav-links">
                    <li><a href="index.jsp">首页</a></li>
                    <li><a href="#">投票活动</a></li>
                    <li><a href="#">登陆</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="contact.jsp">关于我们</a></li>
                </ul>
            </div>
            <div class="col-lg-5 copy-w3ls2">
                <p class="copyright">Copyright &copy; 2018.Company name All rights reserved.More Templates <a href="#" target="_blank" >生命蓝在线投票系统</a> - Collect from <a href="#" title="效率 高效 影响力" target="_blank">生命蓝</a></p>
            </div>
        </div>
    </div>
</section>
<!-- /footer section -->
<!-- back to top -->
<a href="#0" class="cd-top">Top</a>
<!-- /back to top -->
<!-- js files -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<!-- js for back to top -->
<script src="js/top.js"></script>
<!-- /js for back to top -->
<!-- js for navigation -->
<script>
    //  The function to change the class
    var changeClass = function (r,className1,className2) {
        var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
        if( regex.test(r.className) ) {
            r.className = r.className.replace(regex,' '+className2+' ');
        }
        else{
            r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
        }
        return r.className;
    };

    //  Creating our button in JS for smaller screens
    var menuElements = document.getElementById('menu');
    menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');

    //  Toggle the class on click to show / hide the menu
    document.getElementById('menutoggle').onclick = function() {
        changeClass(this, 'navtoogle active', 'navtoogle');
    }

    // http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
    document.onclick = function(e) {
        var mobileButton = document.getElementById('menutoggle'),
            buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;

        if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
            changeClass(mobileButton, 'navtoogle active', 'navtoogle');
        }
    }
</script>
<!-- /js for navigation -->
<!-- /js files -->
</body>
</html>